{% load staticfiles %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 	<link href="{% static "acacia/img/database_24.ico" %}" rel="icon" type="image/x-ico" />
	<title>Grafiek</title>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script>
		function fetchSeries() {
		    $.ajax({
			    url: '/data/get/series/{{series.pk}}',
			    datatype: "json",
			    beforeSend: function(hdr) {
				  	var chart = $('#container').highcharts();
			    	chart.showLoading("Gegevens ophalen...");
			    	return true;
			    },
			    success: function(data) {
				  	var chart = $('#container').highcharts();
			    	chart.series[0].setData(data);
			    },
			    error: function(hdr,status,errorThrown) {
			    	alert("Fout tijdens laden van tijdreeks: " + errorThrown);
			    },
			    complete: function(hdr, status) {
				  	var chart = $('#container').highcharts();
			    	chart.hideLoading();
			    }
		    });
		}
		
		$(function () {
		  var opt = {{options|safe}};
		  opt.chart.events.load = fetchSeries;
		  chart = $('#container').highcharts(opt);
		});
	</script>

</head>
<body>
<div id="container" style="width:800px;height:500px"></div>
</body>
</html>